<template>
  <div class="loading-box">
      <div class="loading-content">
          <img src="./loading-img.gif" alt="">
          <div class="title">{{title}}</div>
      </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
    name: 'loading',
    setup () {
        const title = ref<string>('正在加载中')
        const setTitle = (titleVal: string) => {
            title.value = titleVal
        }
        return {
            setTitle,
            title
        }
    }
})
</script>

<style lang="scss">
.loading-box {
    .loading-content {
        position: absolute;
        left: 50%;
        top: 50%;
        right: 50%;
        bottom: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 80%;
        img {
            width: 40px;
            height: 40px;
        }
        .title {
            margin-top: 10px;
            color: rgba(255, 255, 255, 0.3);
        }
    }
}
</style>
